<template>
  <div class="single-page-container">
    <h3 class="page-title">{{ $route.meta.title }}</h3>
    <ul>
      <li class="flex align-center search_row">
        <p
          class="search_item cursor"
          v-for="(item, index) in hbconfig"
          :key="index"
          :class="{ activeClass: item.active }"
          @click="onhbCofigChange(index)"
        >
          {{ item.industryName }}
        </p>
      </li>
    </ul>
    <div class="card" v-loading="loading">
      <WaterFall
        :list="list"
        :isPreview="false"
        :fieldNames="{ url: 'coverImg', name: 'title' }"
        :onLineProduct="onLineProduct"
      ></WaterFall>
      <div
        v-show="loading === false && list.length === 0"
        class="text-center text gray"
        style="position: relative; top: -200px"
      >
        您当前暂无海报数据
      </div>
      <el-pagination
        background
        class="text-center"
        :page-size="form.pageSize"
        :current-page.sync="form.pageNumber"
        @current-change="onPaginationChange"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getPageList, getInitCategories } from "@/api/shop";
import WaterFall from "@/views/components/water-fall";
import { removeDulpBaseArray } from "@/utils/common";
import { mapGetters } from "vuex";
export default {
  name: "meiyaPosters",
  data() {
    return {
      hbconfig: [], //美业类目
      form: {
        pageNumber: 1,
        pageSize: 50,
        type: "hbtype", // 海报的时候传入 hbtype进行标识
        configIndustryClassficationId: [] //行业分类id
      },
      list: [],
      total: 0,
      loading: false
    };
  },
  created() {
    // 查询初始化分类列表
    getInitCategories().then(res => {
      if (res.status === 100) {
        res.data &&
          res.data.hbconfig.map(item => {
            // hbconfig-- 美业海报装修 行业的数据
            item.active = false;
          });
        //初始化 active
        res.data &&
          res.data.hbconfig.unshift({
            industryName: "全部",
            id: -1,
            active: true
          });
        this.hbconfig = res.data.hbconfig;
        // 增加初始化查询条件
        this.form.configIndustryClassficationId.push(res.data.hbconfig[0]);
        this.queryList();
      }
    });
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    onhbCofigChange(index) {
      // 同row 单选---每个row至少可以选择一个
      this.hbconfig.map(item => {
        item.active = false;
      });
      this.hbconfig[index].active = !this.hbconfig[index].active;
      // 参数赋值
      this.form.configIndustryClassficationId.push(this.hbconfig[index]); //只要点击的都放到进行---最后在提交的时候--过滤选中的项即可
      if (this.userInfo.memberFlag) {
        this.form.pageNumber = 1; //展示第一页数据
        this.queryList();
      } else {
        this.$message({
          customClass: "noMemberTip",
          dangerouslyUseHTMLString: true,
          type: "error",
          message: `<p class="flex align-center"><img src= "/images/cry.png"/>
           <span>&nbsp;&nbsp;<font color="#35353535">抱歉，您不是会员，只能查看部分素材。您可以</font><font color="#a008b2">在小程序中开通会员</font></span>
          </p>
          `
        });
      }
    },
    // 在线制作
    onLineProduct(item) {
      // 加入判断 如果是非会员的话 传入固定的gdId (15815616701274164)和 渠道id(191)
      window.open(`/gdeditor/${this.userInfo.memberFlag ? item.gdId : item.gdId}`);
    },
    onPaginationChange(current) {
      //加入 判断逻辑不是会员的话  只能看第一页数据
      if (this.userInfo.memberFlag) {
        this.form.pageNumber = current;
        this.queryList();
      } else {
        if (current == 1) {
          this.form.pageNumber = current;
        } else {
          this.$message({
            customClass: "noMemberTip",
            dangerouslyUseHTMLString: true,
            type: "error",
            message: `<p class="flex align-center"><img src= "/images/cry.png"/>
           <span>&nbsp;&nbsp;<font color="#35353535">抱歉，您不是会员，只能查看部分素材。您可以</font><font color="#a008b2">在小程序中开通会员</font></span>
          </p>
          `
          });
          this.form.pageNumber = 1; //其他页码不让执行--只停留在第一页
        }
      }
    },
    queryList() {
      // 参数处理
      let form = JSON.parse(JSON.stringify(this.form));
      //去重
      form.configIndustryClassficationId = removeDulpBaseArray(form.configIndustryClassficationId, "id");
      form.configIndustryClassficationId = form.configIndustryClassficationId
        .filter(item => item.active) //全部的id值都为 -1
        .map(val => val.id)
        .join(",");
      // 处理pageStart
      form.pageStart = (form.pageNumber - 1) * form.pageSize;
      delete form.pageNumber;
      this.loading = true;
      getPageList(form)
        .then(res => {
          if (res.status === 100) {
            this.list = res.data.list;
            this.total = res.data.page.totalCounts;
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  components: {
    WaterFall
  }
};
</script>

<style lang="scss" scoped>
.page-title {
  margin-bottom: 32px;
}
.search_row {
  height: 29px;
  margin-bottom: 16px;
  .search_item {
    margin-right: 30px;
  }
  .activeClass {
    height: 29px;
    line-height: 29px;
    background: $background;
    border-radius: $border-radius;
    color: $red;
    padding: 0 6px;
  }
}
.card {
  padding: 0px 0px 37px 0px;
}
</style>
<style lang="scss">
// 修改element ui默认样式--不加scoped即可
.noMemberTip {
  i {
    display: none;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
</style>
